
{% extends "base.html" %}

{% block title %}订阅管理{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>订阅管理</legend>
    </fieldset>
    <p id = 'SelectedValue' style="display: none">存放下拉列表框选中的值，不显示</p>
    {#报刊表单#}
    <div class="layui-row" style="text-align: center">
        <table class="layui-hide layui-anim layui-anim-fadein" id="Newspaper_t" lay-filter="newspaper" >
        </table>
    </div>
    {#报刊表单头部工具栏弹窗#}
    <div style="height: 100px; margin: 5%; display: none" id="search_info_form">
        <form class="layui-form" id="search_forms" method="post" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">筛选值</label>
                <div class="layui-input-block">
                    <select id="search_selector" lay-filter="search_list_1">
                        <option value=""></option>
                        <option value="1">报刊ID</option>
                        <option value="2">报刊名</option>
                        <option value="3">报刊价格</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">价格区间</label>
                <div class="layui-input-block">
                    <select id="price_zone_selector" lay-filter="price_list" disabled="disabled">
                        <option value=""></option>
                        <option value="1">10元以下</option>
                        <option value="2">10元至30元</option>
                        <option value="3">30元以上</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">搜索值</label>
                <div class="layui-input-block">
                    <input type="text" id="search_form" name="bid" lay-verify="title" autocomplete="off"
                           placeholder="请输入信息" class="layui-input">
                </div>
            </div>
        </form>
    </div>
    {#报刊表单头部工具栏#}
    <script type="text/html" id="newspaper_toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm  layui-btn-normal" lay-event="seekNewspaperData">查找信息</button>
        </div>
    </script>
    {#报刊表单右侧工具栏#}
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-sm" lay-event="subscribe-department">部门订阅</a>
        <a class="layui-btn layui-btn-sm" lay-event="subscribe-employee">员工订阅</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="unsubscribe">退订</a>
    </script>

{% endblock %}

{% block script %}
    <script>
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        //报刊表格设计
        var option = {
            elem: '#Newspaper_t'
            , toolbar: '#newspaper_toolbar'
            , title: '用户数据表'
            ,data:''
            , cols: [[
                {field: 'DepartmentName', title: '部门名', align: 'center', fixed: 'left', sort: true, width:270}
                , {field: 'UserName', title: '员工名', align: 'center', width:270}
                , {field: 'NewspaperName', title: '报刊名', align: 'center', width:270}
                , {field: 'Number', title: '订阅数量', align: 'center', width:270}
                , {field: 'CreateTime', title: '加入时间', align: 'center', width:270}
            ]]
            , limit:20
            , page: true
        };

        //加载报刊表格
        load_table('{{ url_for('main_api.get_order_all_info') }}',option);

        //异步接口加载表格
        function load_table(URL,option) {
            $.ajax({
                url:URL,
                type: 'GET',
                async: true,
                success: function (res) {
                    if (res.code === '200' || res.code === '2001') {
                        var data = res.data;
                        load_rows(data,option);
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function f(res) {
                    alert("请求失败！状态码：" + res.status);
                }
            })
        }

        //加载数据
        function load_rows(data,option) {
            var table = layui.table;
            data_length = data.length;
            option['data'] = data;
            table.render(option);
        }

        //头工具栏事件
        table.on('toolbar(newspaper)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'seekNewspaperData':
                    var tag_name, keyword;
                    layer.open({
                        type: 1,
                        title:"查找信息",
                        btn: ['查找'],
                        shadeClose: true,
                        shade: 0,
                        area:['400px', '350px'],
                        content: $("#search_info_form"),
                        success:function(layero, index){
                            $('#search_selector').val("");
                            $('#search_form').val("");
                            form.render('select')
                            form.on('select(search_list_1)', function (data) {
                                tag_name = data.elem[data.elem.selectedIndex].text;
                                if (tag_name === '报刊价格') {
                                    $('#price_zone_selector').removeAttr("disabled");
                                }
                                if (tag_name === '报刊ID') {
                                    $('#price_zone_selector').prop("disabled", 'disabled');
                                }
                                if (tag_name === '报刊名') {
                                    $('#price_zone_selector').prop("disabled", 'disabled');
                                }
                                form.render('select');
                            });
                            form.render('select');
                        },
                        yes:function (ind) {
                            var index = layer.load(1);
                            keyword = $('#search_form').val();
                            $('#search_info_form').css('display', 'none');
                            if (tag_name === '报刊价格') {
                                keyword = $('#price_zone_selector').val();
                                if (keyword === '1') {
                                    keyword = '0,10'
                                } else if (keyword === '2') {
                                    keyword = '10,30'
                                } else {
                                    keyword = '30, 100000'
                                }
                            }
                            $('#search_info_form').css('display', 'none');
                            $.ajax({
                                url:'{{ url_for('main_api.get_newspaper_info_by_tags') }}',
                                type:'GET',
                                async:true,
                                data:{'tag': tag_name, 'keyword': keyword},
                                success:function (res) {
                                    if(res.code === '200'){
                                        var data = res.data;
                                        option['data'] = data;
                                        table.render(option);
                                        layer.msg('共查找到' + data.length + '条记录');
                                        layer.close(index);
                                    }
                                    else{
                                        layer.msg(res.msg);
                                        layer.close(index);
                                    }
                                },
                                error:function f(res) {
                                    alert("请求失败！状态码：" + res.status);
                                    layer.close(index);
                                }
                            });
                            layer.close(ind);
                        },
                        cancel:function () {
                            $('#search_info_form').css('display', 'none');
                        }
                    })
                    break;
            }
        });

        //下拉选择框被选中时触发，将选中的值传出去
        form.on('select',function (data){
            $("#SelectedValue").val(data.elem[data.elem.selectedIndex].text);
        });

    </script>
{% endblock %}